<template>
  <div class="all" id="all" :class="showClass.length?'':'zwkf'">
    <p v-if="!showClass.length">暂未开放</p>
    <div
      class="container-fluid"
      v-for="(vo, o) in childrens()"
      :key="`2typeclass${o}`"
      v-show="showClass.length"
    >
      <div class="row" v-if="vo.ID != id">
        <h3 class="h3 col" v-text="vo.name"></h3>
      </div>
      <div class="row">
        <div
          class="card"
          v-for="(v, i) in showClass"
          :key="`1typeclass${i}`"
          v-show="vo.ID == v.catebagid"
        >
          <router-link :to="{name:'course', params: { ktId: v.cid }}">
            <div
              class="card-header text-center"
              :style="bgimg(getCourse.find(v2=>v2.ID==v.cid).banner)"
            ></div>
            <div class="card-footer text-muted container-fluid">
              <div class="row">
                <div class="col space">
                  <span class="between" v-text="getCourse.find(v2=>v2.ID==v.cid).name"></span>
                  <!-- <i class="icon iconfont icon-redu"></i> -->
                </div>
              </div>
              <div class="row">
                <div class="col-sm-7 text-right">难度:</div>
                <div class="col-sm-5 text-right">
                  <el-rate disabled v-model="getCourse.find(v2=>v2.ID==v.cid).difficulty"></el-rate>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
      <div v-if="!showClass.length" class="zwkf">
        <p>暂未开放</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import _ from "underscore";
export default {
  name: "typeclass",
  data() {
    return {
      catebag: {},
      children: [],
      showClass: [],
      zwkf: true
    };
  },
  computed: {
    ...mapGetters(["getCourse", "getCatebag", "getCoursecatebag"])
  },
  props: ["id"],
  watch: {
    id() {
      this.start();
    }
  },
  mounted() {
    this.start();
  },
  methods: {
    start() {
      this.catebag = this.getCatebag.find(v => v.ID == this.id);
      this.showClass = [];
      this.children = _.filter(this.getCatebag, v => v.catebagid == this.id);
      if (this.children.length) {
        const arrcate = this.children.map(v => v.ID);
        this.showClass = _.filter(
          this.getCoursecatebag,
          v => _.indexOf(arrcate, v.catebagid) != -1 && this.getCourse.find(v2 => v2.ID == v.cid)
        );
        this.showClass = this.showClass.sort(
          (a, b) =>
            this.getCourse.find(v2 => v2.ID == a.cid).paixu -
            this.getCourse.find(v2 => v2.ID == b.cid).paixu
        );
      } else {
        this.showClass = _.filter(
          this.getCoursecatebag,
          vo => vo.catebagid == this.id && this.getCourse.find(v2 => v2.ID == vo.cid)
        );
        this.showClass = this.showClass.sort(
          (a, b) =>
            this.getCourse.find(v2 => v2.ID == a.cid).paixu -
            this.getCourse.find(v2 => v2.ID == b.cid).paixu
        );
      }
    },
    bgimg(i) {
      return {
        backgroundImage: `url(${i}?x-oss-process=style/style-400)`
      };
    },
    childrens() {
      if (this.children.length) {
        return this.children;
      } else {
        return [this.catebag];
      }
    },
    showClassfunc() {
      return this.showClass;
    }
  }
};
</script>

<style scoped>
.all {
  width: 1200px;
  min-height: 750px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.07);
}
.card-header {
  background-size: 100%;
  background-repeat: no-repeat;
  height: 156px;
  border: none;
  background-color: #ffffff;
}
.card {
  width: 282px;
  margin: 7px 4px;
  box-shadow: 1px 1px 21px #f3f3f3;
}
.text-right {
  font-size: 13px;
  padding: 0;
}
.card-footer {
  padding: 7px 1.25rem;
  background-color: #ffffff;
  border-color: #ffffff;
}
.icon {
  height: 78px;
  width: 78px;
}
.card:hover {
  box-shadow: 5px 5px 5px #ececec;
}
.card {
  border: none;
}
.h3 {
  height: 34px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #2f81f1;
  line-height: 34px;
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/scratchborder.png);
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: bottom;
}
.between {
  color: #444444;
}
.space {
  height: 30px;
}
.text-muted {
  color: #999999 !important;
}
</style>